<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 培训管理</el-breadcrumb-item>
                <el-breadcrumb-item>会议报名列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box clearfix">
            <div class="meeting-info fl">
                <p>
                    <label>会议名称:</label><a v-bind:href="'http://localhost:6108/details/'+meetingData.meetinglink" target="_blank" v-text="meetingData.meetingname"></a>
                    <label>会议类型:</label><span v-text="meetingData.meetingtype"></span>
                    <label>会议时间:</label><span v-text="meetingData.meetingtime?$moment(meetingData.meetingtime).format('YYYY-MM-DD HH:mm:ss'):''"></span>
                </p>
            </div>
            <div class="fr">
                <el-button type="primary" size="mini" icon="el-icon-back" @click="$router.go(-1);">返回</el-button>
            </div>
        </div>
        <el-table :data="tableData" border style="width: 100%" size="mini">

            <el-table-column prop="userid" label="用户名" width="90" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="name" label="姓名" width="100"></el-table-column>
            <el-table-column prop="sex" label="性别" width="50">
                <template slot-scope="scope">
                    <span close-transition v-if="scope.row.sex==1">男</span>
                    <span close-transition v-else-if="scope.row.sex==2">女</span>
                </template>
            </el-table-column>
            <el-table-column prop="tel" label="手机号" width="100"></el-table-column>
            <el-table-column prop="mail" label="电子邮箱" width="130" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="addr" label="通讯地址" width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="zipcode" label="邮编" width="70"></el-table-column>
            <el-table-column prop="company" label="工作单位" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="jobtitle" label="单位职务" width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="techtitle" label="职称" width="60">
                <template slot-scope="scope">
                    <span close-transition v-if="scope.row.techtitle=='title0'">正高级</span>
                    <span close-transition v-else-if="scope.row.techtitle=='title1'">副高级</span>
                    <span close-transition v-else-if="scope.row.techtitle=='title2'">中级</span>
                    <span close-transition v-else-if="scope.row.techtitle=='title3'">初级</span>
                    <span close-transition v-else-if="scope.row.techtitle=='title4'">无</span>
                </template>
            </el-table-column>
            <el-table-column prop="credentialstype" label="证件类型" width="90"></el-table-column>
            <el-table-column prop="credentialsno" label="证件号码" width="150"></el-table-column>
            <el-table-column prop="paytype" label="付款方式" width="80">
                <template slot-scope="scope">
                    <span close-transition v-if="scope.row.paytype==1">银行转汇</span>
                    <span close-transition v-else-if="scope.row.paytype==2">现场缴费</span>
                </template>
            </el-table-column>
            <el-table-column prop="isstay" label="是否需要住宿" width="100">
                <template slot-scope="scope">
                    <span close-transition v-if="scope.row.isstay==0">
                        <i class="el-icon-circle-close" style="color:#F56C6C;"></i>
                    </span>
                    <span close-transition v-else-if="scope.row.isstay==1">
                        <i class="el-icon-circle-check" style="color:#67C23A;"></i>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="ischummage" label="是否同意合住" width="100">
                <template slot-scope="scope">
                    <span close-transition v-if="scope.row.ischummage==0">
                        <i class="el-icon-circle-close" style="color:#F56C6C;"></i>
                    </span>
                    <span close-transition v-else-if="scope.row.ischummage==1">
                        <i class="el-icon-circle-check" style="color:#67C23A;"></i>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="isinvoice" label="是否开具发票" width="100">
                <template slot-scope="scope">
                    <span close-transition v-if="scope.row.isinvoice==0">
                        <i class="el-icon-circle-close" style="color:#F56C6C;"></i>
                    </span>
                    <span close-transition v-else-if="scope.row.isinvoice==1">
                        <i class="el-icon-circle-check" style="color:#67C23A;"></i>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="invoicehead" label="发票抬头" width="150"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="idcode" label="纳税人识别号" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="invoicecomment" label="发票备注信息" width="200"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="creattime" label="报名时间" width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.creattime?$moment(scope.row.creattime).format('YYYY-MM-DD HH:mm:ss'):''}}</span>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <div class="pagination" style="float: left">
            <el-pagination
                    small
                    @current-change="handleCurrentChange" background
                    layout="total, prev, pager, next, jumper"
                    :current-page="cur_page"
                    :total="totalCount">
            </el-pagination>
        </div>
    </div>

</template>

<script>

  export default {
    data: function () {
      return {
        meetingid: '',  //切换
        tableData: [],
        meetingData: {
          meetingname: '',
          meetingtype: '',
          meetingtime: '',
          meetinglink: ''
        },
        pagerow: 10,
        cur_page: 1,
        totalCount: 0,
      }
    },
    created() {
      this.getRegisList(this.$route.query.meetingid)
      this.getMeeting(this.$route.query.meetingid)
    },
    methods: {
      //分页
      handleCurrentChange(val) {
        this.cur_page = val;
        this.getRegisList(this.$route.query.meetingid)
      },
      //页面初始化
      getRegisList(meetingid) {
        let self = this
        self.$axios.post('/user_meeting/getlistbymeetingid', {
          page: self.cur_page,
          pagerow: self.pagerow,
          meetingid: meetingid
        }).then(function (response) {
          if (response.data.code == 0) {
            self.tableData = response.data.data
            self.totalCount = response.data.rowcount
          } else {
            self.$message.error(response.data.message);
          }
        }).catch(err => {
          self.$message.error('请求服务器失败，请稍后再试！');
        })
      },
      getMeeting(meetingid) {
        var self = this
        self.$axios.post('/meeting/getmeetinginfo', {
          meetingid: meetingid
        }).then(function (res) {
          if (res.data.code == 0) {
            self.meetingData = res.data.data
          } else {
            self.$message.error(res.data.message);
          }
        }).catch((err) => {
          self.$message.error('请求网络失败，请稍后再试！');
        })
      }
    }
  }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .meeting-info p {
        padding-top: 3px;
        color: #909399;
        font-weight: 500;
    }

    .meeting-info p label:nth-child(n+2) {
        margin-left: 15px;
    }

    .fr {
        float: right;
    }

    .fl {
        float: left;
    }
</style>
